JavaScript Best Practices — This and Class Strings

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at how to return this to let us chain class methods together and write a toString method to make sure that our class works properly and causes no side effects.

Methods Can Return this to Help With Method Chaining

In our JavaScript classes, we can return this in our method so that we can chain our method with the modified value of this .

In each method that returns this , we can modify the value of this so that we can write code to chain those methods together and get the result that we want when the methods are called together.

For instance, we can write code like the following:

class Box {
  setHeight(height) {
    this.height = height;
    return this;
  }

  setWidth(width) {
    this.width = width;
    return this;
  }
}

In the code above, we have the Box class with the setHeight and setWidth methods.

In each method, we change one property of this with the value that we pass in as the argument of each method.

Then we can chain our Box instance method calls as follows:

new Box().setHeight(10).setWidth(15);

Then in our console log, we have the following output if we log the return value of the method chain expression that we have above:

Box {height: 10, width: 15}

As we can see, the height and width properties are set by the chain of method calls we have above.

Write a toString() Method in Our Class to Make Sure That it Works Successfully

We can write our own toString method in our JavaScript class so that we can see that it works successfully. In the method, we can return the value of the members of the class so that we know that they’re set correctly.

For instance, we can write the following code to add a toString method to our class:

class Box {
  setHeight(height) {
    this.height = height;
    return this;
  }

  setWidth(width) {
    this.width = width;
    return this;
  }

  toString() {
    return `height: ${this.height}, width: ${this.width}`;
  }
}

In the code above, we have the toString method that returns a string that has the value of this.height and this.width , which are the members of our Box instance.

Then when we call the following chain of methods:

new Box().setHeight(10).setWidth(15).toString();

We see that the value returned from toString is:

height: 10, width: 15

And we confirm that the members are set correctly.

An Empty Constructor Function or One That Just Delegates to a Parent Class is Unnecessary

In JavaScript, we don’t have to provide a constructor for every class. We also don’t need to call the parent class constructor from a child class if we just call it with the same arguments as the parent class.

For instance, we instead of writing the following code to add empty constructor:

class Foo {
  constructor() {}
}

We can just skip the constructor method inside the Foo class as follows:

class Foo {}

They both do the same thing, so we don’t need the extra empty constructor method.

Also, we don’t need code in our child constructor that just calls the parent constructor:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(...args) {
    super(...args);
  }
}

In the code above, we have the super call in Cat that just calls the parent Animal constructor with whatever we pass in.

When we create a Cat instance as follows:

const cat = new Cat('jane');

We get the value Cat {name: “jane”} from the console log.

We can just omit the constructor in this case. Therefore, we can just write the following:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {}

Without the constructor in Cat , we get the same result as in the previous example, so we should just take it out.

Conclusion

Our class methods can return this to return the value of this after it’s been modified by our method.

If we just have an empty constructor in a parent class or a constructor in a child class that calls super with the same arguments as the parent constructor, we can remove them from our code.

Also, we can make a toString method to return a string with our class members to make sure that they’re set correctly.